<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据删选组件</title>
    <style>* {
        padding: 0;
        margin: 0
    }

    body, html {
        width: 100%;
        height: 100%;
        font-family: "微软雅黑";
        background: #b1b1b1
    }

    li, ul {
        list-style: none
    }

    .container {
        width: 560px;
        height: 400px;
        padding: 40px 20px;
        background: #fff;
        border-radius: 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -280px;
        margin-top: -200px
    }

    .container ul.data-list {
        width: 40%;
        height: 100%;
        border: 1px solid #e5e5e5;
        float: left
    }

    .container ul.data-list li {
        line-height: 32px;
        padding: 0 10px
    }

    .container ul.data-list li:hover {
        background-color: #c5efff;
        color: #252525;
        cursor: pointer;
        font-weight: 700
    }

    .container ul.data-list li.selected {
        background-color: #0095e8;
        color: #fff
    }

    .button-box {
        float: left;
        width: 19%;
        height: 50%;
        margin-top: 20%
    }

    .button-box button {
        background: 0 0;
        font-size: 16px;
        border: 1px solid #818181;
        color: #359bf5;
        height: 36px;
        line-height: 36px;
        width: 80%;
        margin: 10px auto;
        display: block;
        cursor: pointer
    }</style>
</head>
<body>
<div class="container">
    <ul class="data-list" id="lList">
        <li>第一行选择文字1</li>
        <li>第二行选择文字2</li>
        <li>第三行选择文字3</li>
        <li>第四行选择文字4</li>
        <li>第五行选择文字5</li>
        <li>第六行选择文字6</li>
        <li>第一行选择文字7</li>
        <li>第二行选择文字8</li>
    </ul>
    <div class="button-box">
        <button type="button" name="button" id="add">添 加</button>
        <button type="button" name="button" id="remove">删 除</button>
    </div>
    <ul class="data-list" id="rList"></ul>
</div>
<script src="js/jquery.min.js"></script>
<script>$(function () {
    function t() {
        this.parentNode === l ? a.append(this) : n.append(this)
    }

    function e() {
        var t = this.className;
        this.className = "selected" === t ? "" : "selected"
    }

    function i() {
        for (var t = $(".data-list li.selected"), e = 0; e < t.length; e++)"add" === this.id ? a.append(t[e]) : n.append(t[e])
    }

    for (var n = $("#lList"), l = document.getElementById("lList"), a = $("#rList"), c = $(".data-list li"), d = 0; d < c.length; d++)c[d].onclick = e, c[d].ondblclick = t;
    $("#add").on("click", i), $("#remove").on("click", i)
})</script>
</body>
</html>